
<template>
  <h5>{{ msg }}</h5>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>    
  </div>
  <div class="hello"> 
    <p>num: {{ store.num }}</p>  
    <button @click="changeName">修改num</button>
  </div>
  <p>--------h 函数组件-----------</p>
  <MyComponent></MyComponent>
  <p>------函数式组件-----</p>
  <Functional level="3"> 这是一个动态h元素888</Functional>
  <p>------异步组件-----</p>
  <AsyncComponent></AsyncComponent>
  <p>------动画组件--</p>
  <TransitionTest></TransitionTest>
  

</template>

<script setup lang="ts">
// import MyComponent from '../jsx/MyComponent.jsx'
import {  ref ,h,defineAsyncComponent } from "vue";
import Functional from './Functional.vue'
defineProps<{ msg: string }>();
const count = ref(0);
import { useStore } from "../stores/index";
const store = useStore();
const changeName = () => {
  store.setNum(1);
};
import TransitionTest from './components/TransitionTest.vue';
const AsyncComponent = defineAsyncComponent(() =>
  import('./components/MyAsyncComponent.vue')
);

const counter = ref(0); 
// 定义一个组件
const MyComponent = {
  render() {
    return h('div', {onClick(){
      counter.value ++
    } }, `I am RenderTest: ${counter.value}`)
  }
}
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
